<!--
 * @Author: anshengtyp
 * @Date: 2024-02-26 15:57:00
 * @LastEditTime: 2024-04-11 08:08:08
 * @LastEditors: anshengtyp
 * @Description: 720
-->

<template>
  <div class="app-container">
    <el-card class="box-card" v-loading="loading">
      <template #header class="clearfix">
        <span>{{ groupData?.name }} - 720全景照片列表</span>
        <el-input style="width: 310px;" placeholder="请输入名称" v-model="queryParams.name" class="input-with-select"
          @keyup.enter.native="getList" clearable>
          <template #append>
            <el-icon style="cursor: pointer;">
              <Search @click="getList" />
            </el-icon>
          </template>
        </el-input>
      </template>
      <!-- 图片展示区域 -->
      <div class="displayArea">
        <!-- 上传跳转 -->
        <div class=" boxSize" v-for="(item, index) in tableList" :key="index">
          <div v-if="!item.id" class="upload" title="上传" @click="goSetting(item)">
            <el-icon style="font-size: 30px;">
              <Plus />
            </el-icon>
          </div>
          <div v-else class="imgBox">
            <div class="publish commonStyle" v-if="item?.status === '1'">
              已发布
            </div>
            <div v-else class="unpublish commonStyle">未发布</div>
            <img :src="item.thumb?.path">
            <!-- 工具栏 -->
            <div class="toolbar">
              <el-icon title="预览" style="font-size: 30px;" @click="view(item)">
                <View />
              </el-icon>
              <el-icon title="设置" @click="goSetting(item)" style="font-size: 30px;">
                <setting />
              </el-icon>
              <el-icon title="发布" @click="publish(item)" style="font-size: 30px;">
                <Upload />
              </el-icon>
              <el-icon title="删除" style="font-size: 30px;" @click="handleDelete(item)">
                <delete />
              </el-icon>
            </div>
          </div>
          <div class="imgTitle" :title="item.name">
            {{ item.name?.length > 20 ? item.name.substr(0, 20) + '...' : item.name }}
          </div>
        </div>
      </div>
      <el-pagination v-show="total > 9" background v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize" :disabled="disabled" :background="background"
        layout="total, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange" />
    </el-card>
  </div>
</template>

<script>
import { ElMessageBox } from 'element-plus'
import { getGatherDetails } from "@/api/gather";
import { get720List, delete720, unPublishFullImage, publishFullImage } from "@/api/720.js";
export default {
  name: 'Management720',
  data() {
    return {
      loading: false,
      total: 0,
      queryParams: {
        name: '',
        pageNum: 1,
        pageSize: 9
      },
      tableList: [
        {
          url: ''
        }
      ],
      groupId: '',
      groupData: null
    };
  },

  created() {
    this.groupId = this.$route.query.groupId;
    this.getGroupData();
    this.getList();
  },

  methods: {
    // 获取分组数据
    async getGroupData() {
      const { data } = await getGatherDetails(this.groupId);
      this.groupData = data;
    },
    async getList() {
      this.loading = true;
      this.queryParams.groupId = this.groupId;
      const res = await get720List(this.queryParams);
      this.tableList = [...this.$options.data().tableList, ...res.rows];
      this.tableList.forEach(item => {
        if (item.thumb) {
          item.thumb.path = import.meta.env.VITE_APP_PIC_BASE_API + item.thumb.path;
        }
      })
      this.total = res.total;
      this.loading = false;
    },
    goSetting(row) {
      this.$router.push({
        path: '/setting720',
        query: { groupId: this.groupId, id: row?.id }
      })
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    view(row) {
      let url = `/preview?id=${row.id}`
      window.open(url, "_blank");
    },
    // 发布
    async publish(row) {
      if (row.status === '1') {
        // 已经发布就取消发布
        ElMessageBox.confirm(
          '是否确认取消发布名称为"' + row.name + '"的全景数据？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(async () => {
            await unPublishFullImage(row.id);
            this.$modal.msgSuccess("取消发布成功");
            this.getList();
          }).catch(() => { });
      } else {
        ElMessageBox.confirm(
          '是否确认发布名称为"' + row.name + '"的全景数据？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(async () => {
            await publishFullImage(row.id);
            this.$modal.msgSuccess("发布成功");
            this.getList();
          }).catch(() => { });
      }
    },
    /** 删除按钮操作 */
    handleDelete(item) {
      ElMessageBox.confirm(
        '是否确认删除名称为"' + item.name + '"的全景数据？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(async () => {
          await delete720(item.id);
          this.$modal.msgSuccess("删除成功");
          this.getList();
        }).catch(() => { });
    }
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  ::v-deep .el-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

::v-deep .el-card__body {
  height: 81vh;

  .displayArea {
    height: 66vh;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 设置 4 列 */
    grid-template-rows: 50% 50%;
    /* 设置 2 行 */
    gap: 30px;
    /* 设置间距 */
    justify-items: center;
    /* 水平居中 */

    .boxSize {
      width: 100%;

      .upload {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: 1px dashed #ccc;
        background-color: #fafafa;
        border-radius: 4px;
      }

      .imgBox {
        height: 100%;
        overflow: hidden;
        position: relative;

        .toolbar {
          position: absolute;
          bottom: 0px;
          left: 0px;
          height: 40px;
          width: 100%;
          backdrop-filter: blur(1px);
          background-color: rgba(255, 255, 255, 0.6);
          display: flex;
          align-items: center;
          justify-content: end;

          >i {
            padding-right: 10px;
            cursor: pointer;
            color: #1890FF;
          }
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: all 0.3s ease;
          cursor: pointer;

          &:hover {
            transform: scale(1.1);
          }
        }
      }

      .imgTitle {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #3D3D3D;
        white-space: nowrap;
      }

      .commonStyle {
        width: 100px;
        text-align: center;
        height: 35px;
        line-height: 35px;
        position: absolute;
        top: 5px;
        left: -30px;
        z-index: 99;
        transform: rotate(-45deg);
        font-size: 12px;
        font-weight: bold;
        color: white;
      }

      .publish {
        background-color: #67C23A;
      }

      .unpublish {
        background-color: #FF0000;

      }
    }
  }
}

::v-deep .el-pagination {
  margin: 0px;
  float: right;
  padding-top: 7vh;
}
</style>
